<template>
  <view class="styleNews">
    <!-- <toast></toast> -->
    <!-- <u-navbar title="财务中心" :bgColor="navbarClass.titleBgColor" @leftClick="backHome" :placeholder="true"> </u-navbar> -->
    <view class="line-tab">
      <u-tabs
        :list="list"
        lineColor="#FF5453"
        :activeStyle="{
          color: '#FF5453',
        }"
        :inactiveStyle="{
          color: '#9e9e9e',
        }"
        :is-scroll="false"
        :current="current"
        @change="switchTab"
      ></u-tabs>
    </view>
    <view v-if="!loadingShow">
      <view class="tabsList" v-show="current == 0">
        <!-- 党建活动 -->
        <view class="tabItem" v-for="(v, i) in dtNewsVoList0" :key="i" @click="gotoJump('/pageContent/affair/message', v)">
          <image class="image" :src="v.img" mode="" />
          <view class="tabCont">
            <view class="text1 u-line-2">{{ v.title }}</view>
            <view class="time">{{ dateFormat(v.createTimeNew) }}</view>
          </view>
        </view>
        <view class="noList" v-if="!(dtNewsVoList0 && dtNewsVoList0.length)">
          <img src="../../static/image/noList.png" />
          <view class="textTip">暂无信息</view>
        </view>
      </view>
      <view class="tabsList" v-show="current == 1">
        <!-- 学习园地 -->
        <view class="tabItem" v-for="(v, i) in dtNewsVoList1" :key="i" @click="gotoJump('/pageContent/affair/message', v)">
          <image class="image" :src="v.img" mode="" />
          <view class="tabCont">
            <view class="text1 u-line-2">{{ v.title }}</view>
            <view class="time">{{ dateFormat(v.createTimeNew) }}</view>
          </view>
        </view>
        <view class="noList" v-if="!(dtNewsVoList1 && dtNewsVoList1.length)">
          <img src="../../static/image/noList.png" />
          <view class="textTip">暂无信息</view>
        </view>
      </view>
    </view>

    <view class="loading" v-if="loadingShow"><u-loading-icon></u-loading-icon></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loadingShow: true,
      dtNewsVoList0: [],
      dtNewsVoList1: [],
      list: [
        {
          name: '党建活动',
        },
        {
          name: '学习园地',
        },
      ],
      current: 0,
    }
  },
  onLoad() {
    this.findArticleList(24)
  },
  methods: {
    findArticleList(str) {
      this.loadingShow = true
      this.$https
        .post({
          url: '/axh/articleManage/findArticleList',
          data: {
            oneClassifyId: 23,
            twoClassifyId: str,
            threeClassifyId: '',
            fourClassifyId: '',
            page: 1,
            limit: 200,
            title: '',
            status: 1,
            phoneAuth: 1,
          },
        })
        .then((data) => {
          this.loadingShow = false
          if (this.current == 0) {
            this.dtNewsVoList0 = data.result.dtNewsVoList
          } else if (this.current == 1) {
            this.dtNewsVoList1 = data.result.dtNewsVoList
          }
        })
    },
    switchTab(e) {
      this.current = e.index
      this.loadingShow = false
      if (this.current == 0 && this.dtNewsVoList0.length == 0) {
        this.findArticleList(24)
      } else if (this.current == 1 && this.dtNewsVoList1.length == 0) {
        this.findArticleList(25)
      }
    },
    gotoJump(url, item) {
      if (item.articleType == 2) {
        //#ifdef H5
        location.href = item.content
        //#endif
      } else {
        uni.navigateTo({
          url: `${url}?id=${item.id}`,
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.styleNews {
  padding-bottom: 24rpx;
  background: #fff;
  .line-tab {
    padding-bottom: 8rpx;
    border-bottom: 1px solid #e5e5e5;
  }
  .tabsList {
    padding: 32rpx;
    .tabItem {
      display: flex;
      padding: 24rpx 0;
      border-bottom: 1px solid #eeeeee;
      .image {
        width: 136rpx;
        height: 136rpx;
        margin-right: 16rpx;
        border-radius: 8rpx;
      }
      .tabCont {
        width: 534rpx;
        height: 100rpx;
        .text1 {
          margin-bottom: 18rpx;
          margin-top: 6rpx;
          height: 76rpx;
        }
        .time {
          color: #9e9e9e;
          font-size: 26rpx;
        }
      }
    }
  }
  .loading {
    display: flex;
    justify-content: center;
  }
}
.loading {
  margin-top: 50rpx;
}
</style>
